<template>
  <div class="main">
    <!--<div id="log" style="margin-left:120px;margin-top:100px;color: red"></div>-->
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="topObj" v-show="$store.state.navigationShow">
      <i class="logo"></i>
      <scroll-container
        :containerWidth="containerWidth"
        :enableScrollX="true"
        @scrollTo="scrollTo"
        ref="scrollContainer"
      >
        <div class="nav-container" ref="navContainer">
          <div
            class="nav"
            data-index="tar_100_0"
            :class="{nav_text_foc: NavigationData[0],active_hold: holdIndex === 0}"
          >班级圈
          </div>
          <div
            class="nav"
            data-index="tar_100_1"
            :class="{nav_text_foc: NavigationData[1],active_hold: holdIndex === 1}"
          >同步课堂
          </div>
          <div
            class="nav"
            data-index="tar_100_2"
            :class="{nav_text_foc: NavigationData[2],active_hold: holdIndex === 2}"
          >远程课堂
          </div>
          <div
            class="nav"
            data-index="tar_100_3"
            :class="{nav_text_foc: NavigationData[3],active_hold: holdIndex === 3}"
          >第二课堂
          </div>
          <div
            class="nav"
            data-index="tar_100_4"
            :class="{nav_text_foc: NavigationData[4],active_hold: holdIndex === 4}"
          >校园风采
          </div>
          <div
            class="nav"
            data-index="tar_100_5"
            :class="{nav_text_foc: NavigationData[5],active_hold: holdIndex === 5}"
          >校园安全
          </div>
          <div
            class="nav"
            data-index="tar_100_6"
            :class="{nav_text_foc: NavigationData[6],active_hold: holdIndex === 6}"
          >个人中心
          </div>
        </div>
      </scroll-container>
    </div>
  </div>
</template>

<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";

  export default {
    name: "Navigation",
    components: {scrollContainer},
    data() {
      return {
        hs: this.$store.state.hs,
        NavigationData: [false, false, false, false, false, false, false],
        containerWidth: "2320px",
        navShow: true,
        mainObj: {},
        holdIndex: -1
      };
    },
    methods: {
      scrollTo(targetIndex) {
        // this.$refs.scrollContainer.scrollTo(targetIndex, true);
      },
      addNavigationFoc() {
        let that = this;

        // 班级圈
        new fObject(
          100,
          0,
          null,
          null,
          () => {
            this.hs.initFocus("0-0");
          },
          null,
          "100-1"
        );
        // 同步课堂
        new fObject(
          100,
          1,
          null,
          null,
          () => {
            this.hs.initFocus("0-0");
          },
          "100-0",
          "100-2"
        );
        // 远程课堂
        new fObject(
          100,
          2,
          null,
          null,
          () => {
            this.hs.initFocus("0-0");
          },
          "100-1",
          "100-3"
        );
        // 第二课堂
        new fObject(
          100,
          3,
          null,
          null,
          () => {
            this.hs.initFocus("0-0");
          },
          "100-2",
          "100-4"
        );
        // 校园风采
        new fObject(
          100,
          4,
          null,
          null,
          () => {
            this.hs.initFocus("0-0");
          },
          "100-3",
          "100-5"
        );
        // 校园安全
        new fObject(
          100,
          5,
          null,
          null,
          () => {
            this.hs.initFocus("0-0");
          },
          "100-4",
          () => {
            this.hs.initFocus("100-6");
          }
        );
        /// 个人中心
        new fObject(
          100,
          6,
          null,
          null,
          () => {
            if(!Object.keys(this.$store.state.user).length){
              this.hs.initFocus("105-0");
            }else {
              this.hs.initFocus("0-0");
            }
          },
          () => {
            this.hs.initFocus("100-5");
          },
          null
        );

        this.hs.fObjCommit();
        this.hs.addFocus([100], (group, objid, objindex) => {
          console.log(group + "|" + objindex);

          that.$set(that.NavigationData, objindex, true);
          if (this.holdIndex === objindex) {
            //console.log("返回导航栏,未更新");
            return;
          }

          if (objindex === 0) {
            window.location.href = "http://ips-4k.hzdtv.tv/template_images/html/edu_new/cloudSchool_chrome/index.html";
          } else if (objindex === 1) {
            //设置默认背景
            if (this.$store.state.appBg !== this.$store.state.appBgInfo.default)
              this.$store.commit("setAppBg", this.$store.state.appBgInfo.default);
            this.$router.push("/tbkt");
          } else if (objindex === 2) {
            if (this.$store.state.appBg !== this.$store.state.appBgInfo.yckt)
              this.$store.commit("setAppBg", this.$store.state.appBgInfo.yckt);
            this.$router.push("/yckt");
          } else if (objindex === 3) {
            if (this.$store.state.appBg !== this.$store.state.appBgInfo.default)
              this.$store.commit("setAppBg", this.$store.state.appBgInfo.default);
            this.$router.push("/dekt");
          } else if (objindex === 4) {
            if (this.$store.state.appBg !== this.$store.state.appBgInfo.xyfc)
              this.$store.commit("setAppBg", this.$store.state.appBgInfo.xyfc);
            this.$router.push("/xyfc");
          } else if (objindex === 5) {
            if (this.$store.state.appBg !== this.$store.state.appBgInfo.default)
              this.$store.commit("setAppBg", this.$store.state.appBgInfo.default);
            this.$router.push("/xyaq");
          } else if (objindex === 6) {
            if (this.$store.state.appBg !== this.$store.state.appBgInfo.default)
              this.$store.commit("setAppBg", this.$store.state.appBgInfo.default);
            this.$router.push("/personal");
          }
        });
        this.hs.addBlur([100], (group, objid, objindex) => {
          that.$set(that.NavigationData, objindex, false);
        });
        this.hs.addSelect([100], function (group, objid, objindex) {
        });

        this.hs.addBlurArea([100], (group, objid, objindex) => {
          this.holdIndex = objindex;
        });
      }
    },
    created() {
      this.addNavigationFoc();
    },
    mounted() {
      // this.hs.initFocus("100-2");
    }
  };
</script>

<style scoped lang="less">
  .main {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    // overflow: hidden;
    .bg1 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
      z-index: -1;
    }
    .topObj {
      position: absolute;
      left: 0px;
      top: 112px;
      width: 1920px;
      height: 88px;
      display: flex;
      .logo {
        background: url("../assets/images/logo.png") center no-repeat;
        background-size: 100% auto;
        width: 224px;
        margin-left: 120px;
      }
      .content {
        width: 1576px;
        overflow: hidden;
        .nav-container {
          height: 88px;
          width: 1920px;
          display: flex;
          .nav {
            position: relative;
            align-self: center;
            margin-left: 72px;
            width: 200px;
            height: 60px;
            background-image: linear-gradient(#53ceff, #6ec6e8);
            border-radius: 30px;
            line-height: 60px;
            font-size: 42px;
            text-align: center;
            border: 2px solid transparent;
            overflow: hidden;
          }
          .nav:before {
            content: "";
            background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            height: 100%;
            width: 45%;
            position: absolute;
            top: 0;
            left: -100%;
            z-index: 11;
          }
          @-webkit-keyframes myScale {
            90% {
              -webkit-transform: scale(1.35);
            }
            100% {
              -webkit-transform: scale(1.35);
            }
          }
          .active_hold {
            background: #09508a;
            box-shadow: inset 2px 3px 7px 0px rgba(0, 0, 0, 0.35);
            color: #fbff92;
          }
          .nav_text_foc {
            transform: scale(1.35);
            -webkit-transform: scale(1.35);
            border: 2px solid #fff;
            background: #0e60e9;
            color: #fff;
            /*-webkit-animation: myScale 100ms;*/
            /*-webkit-animation-fill-mode: forwards;*/
            /*-webkit-animation-delay: 50ms;*/
          }
          .nav_text_foc:before{
            left: 150%;
            -webkit-transition: left 1000ms ease-in;
          }
        }
      }
    }
  }

  .container-list {
    width: 1920px;
  }
</style>
